<!--
 * @Author: coocase
 * @Date: 2021-04-07 14:48:42
 * @LastEditTime: 2021-05-13 14:06:35
 * @LastEditors: coocase
 * @Description: 列表显示
 * @FilePath: \git\dami\src\pages\result\resultList.vue
-->
<template>
  <div class="list">
    <Card
      class="item"
      v-for="data in pages.pageData"
      :key="data.name"
      :bordered="false"
    >
      <!-- <div class="item-img" :style="{ 'background-color': data.imgUrl }"></div> -->
      <img class="item-img" :src="data.imgUrl" alt="" @click="detail(data)" />
      <div class="item-info" @click="detail(data)">
        <p class="item-title">{{ data.itemName }}</p>
        <p class="item-itemName">
          <Icon type="ios-bookmarks" color="#ff3c1b" size="16" />
          {{ data.itemName }}
        </p>
        <p class="item-locate">
          <Icon type="ios-locate-outline" color="#ff3c1b" size="16" />
          <!-- {{ data.address }} -->
          北京卢米埃影城长楹天街IMAX店 XXXX剧院
        </p>

        <p class="item-price">
          <Icon type="md-qr-scanner" color="#ff3c1b" size="16" />
          票价： ￥{{ data.minPrice }}
        </p>
      </div>
    </Card>
    <!-- <Page
      :total="pages.pageTotal"
      :page-size="pages.pageSize"
      @on-change="pageChange"
      :current="1"
      class="page"
    /> -->
  </div>
</template>

<script>
export default {
  name: "ResultList",
  props: ["results"],
  data() {
    return {
      datas: "",
      //初始化信息
      pages: {
        pageNum: 1,
        pageTotal: 10,
        pageSize: 6,
        pageData: [],
        pageData: [
          {
            id: 1,
            itemName: "河边的错误",
            imgUrl: require("@/assets/banner/1.png"),
            minPrice: 100,
          },
          {
            id: 2,
            itemName: "坚如磐石",
            imgUrl: require("@/assets/banner/2.png"),
            minPrice: 100,
          },
          {
            id: 3,
            itemName: "一个和四个",
            imgUrl: require("@/assets/banner/3.png"),
            minPrice: 100,
          },
          {
            id: 4,
            itemName: "无价之宝",
            imgUrl: require("@/assets/banner/4.png"),
            minPrice: 100,
          },
          {
            id: 5,
            itemName: "唐人街探案",
            imgUrl: require("@/assets/banner/5.png"),
            minPrice: 100,
          },
          {
            id: 6,
            itemName: "出好戏",
            imgUrl: require("@/assets/swiper/two.png"),
            minPrice: 50,
          },
          {
            id: 7,
            itemName: "他们正年轻",
            imgUrl: require("@/assets/swiper/three.png"),
            minPrice: 60,
          },
          {
            id: 8,
            itemName: "歌唱音乐节",
            imgUrl: require("@/assets/swiper/one1.png"),
            minPrice: 55,
          },
        ],
      },
      Initialized: false,
    };
  },
  methods: {
    detail(item) {
      console.log(item, "item");
      localStorage.setItem("itemInfo", JSON.stringify(item));
      //   window.location.reload();

      this.$router.push({ name: "Detail" });
    },
    // initPage: function () {
    //         // console.log("results存在");
    //         // console.log(this.results);
    //         if(this.results){
    //             this.datas = this.results;
    //             this.pages.pageTotal = this.datas.pages.length * 6;
    //             this.pages.pageData = Array.from(this.datas.pages[0].datas);
    //         }else{
    //             this.$http.getRequest({
    //             api:'results',
    //             data:{}
    //         }).then((res) => {
    //             // console.log("刷新数据：");
    //             // console.log(res.pages[0].datas[0].title);
    //             this.datas = res;
    //             this.pages.pageTotal = this.datas.pages.length * 6;
    //             this.pages.pageData = Array.from(this.datas.pages[0].datas);
    //             //获取数据再跳转，否则第一次渲染不出数据

    //             //   console.log(res);
    //         }).catch((err) => {
    //             console.log(err)
    //         });
    //         }

    // },
    scrollto: function () {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    pageChange(i) {
      this.pages.pageNum = i;
      this.pages.pageSize = this.datas.pages[i - 1].datas.length;
      this.pages.pageData = this.datas.pages[i - 1].datas;
      this.scrollto();
    },
    goDetail: function () {
      this.$toDetail();
    },
  },
  // created:function () {
  //     console.log("created");
  // },
  // beforeMount: function () {
  //         console.log("beforeMount");

  // },
  mounted: function () {
    // console.log("init");
    // this.initPage();
    const val = localStorage.getItem("searchVal");
    console.log(val, "--------------------");
    // this.pages.pageData

    // this.pages.pageData = this.pages.pageData.filter((item) => {
    //   //   item.itemName == "河边的错误";
    //   console.log(item.itemName, "--------------------");
    //   //   item.itemName.includes(val);
    //   item.itemName.indexOf(val) > -1;
    // });
    this.pages.pageData = this.pages.pageData.filter((item) => {
      // console.log();
      console.log(val, "--------------------");
      console.log(item.itemName, "--------------------");
      //   item.itemName.includes(val);
      //   item.itemName.indexOf(val) != -1;
      return item.itemName.indexOf(val) != -1;
    });
    console.log("处理后", this.pages.pageData);
  },
};
</script>

<style scoped>
.item {
  height: 240px;
  margin-bottom: 10px;
  border-bottom: solid 1px #eee;
}
.item:hover {
  cursor: pointer;
}
.item-img {
  display: inline-block;
  width: 150px;
  height: 200px;
  border: none;
  background-color: rgb(67, 69, 204);
}
.item-info {
  display: inline-block;
}

.item-itemName,
.item-price,
.item-date,
.item-locate,
.item-title {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 10px;
  font-size: 12px;
}
.item-title {
  font-size: 16px;
  font: bolder;
  margin-bottom: 50px;
}
.page {
  align-items: center;
}
</style>